<template>
  <div class="recommend" ref="container"><!-- -->
    <div class="title acea-row row-center-wrapper">
      <span class="iconfont icon-zhuangshixian"></span>
      <span class="name">为你推荐</span>
      <span class="iconfont icon-zhuangshixian lefticon"></span>
    </div>
    <div class="recommendList acea-row row-between-wrapper">
      <router-link
        :to="{ path: '/detail/' + item.id }"
        class="item"
        v-for="(item, index) in hostProduct"
        :key="index"
      >
        <div class="pictrue">
          <img :src="item.image" class="image" />
        </div>
        <div class="name line1">{{ item.store_name }}</div>
        <div class="money font-color-red">
          ￥<span class="num">{{ item.price }}</span>
        </div>
      </router-link>
    </div>
    <Loading :loaded="loadend" :loading="loading"></Loading>
  </div>
</template>
<script>
import { getHostProducts } from "@api/store";
// import Loading from "@components/Loading";
export default {
  name: "Recommend",
  props: {},
  components: {
    // Loading
  },
  data: function() {
    return {
      hostProduct: [
        {
          id:"11",
          image:"http://activity.crmeb.net/public/uploads/attach/2019/05/30//0eecbfbca9ebc315c2882590fd55a209.jpg",
          price:"80.00",
          store_name:"伊利酸奶畅轻整箱装乳酸菌燕麦黄桃草莓早餐奶250克9瓶风味发酵乳"
        },{
          id:"9",
          image:"http://activity.crmeb.net/public/uploads/attach/2019/05/29//51308e61ace45968fdef953b2ac6c241.jpg",
          price:"1000.00",
          store_name:"【雷神911Air星战】雷神(ThundeRobot)911Air星战二代旗舰版15.6英寸窄边框游戏笔记本电脑i79750H512GSSDRGB键盘GTX1650"
        },{
          id:"8",
          image:"http://activity.crmeb.net/public/uploads/attach/2019/05/29//71e85589cb7d3398d08f0d55bdb9031d.jpg",
          price:"0.00",
          store_name:"【AppleiPhone8】AppleiPhone8(A1863)256GB深空灰色移动联通电信4G手机"
        },{
          id:"7",
          image:"http://activity.crmeb.net/public/uploads/attach/2019/05/29//6f2a1ece45e307f274e3384410a3bd3a.jpg",
          price:"100.00",
          store_name:"【华为畅享9S】华为HUAWEI畅享9S6GB+64GB珊瑚红全网通2400万超广角三摄珍珠屏大存储移动联通电信4G手机双卡双待"
        },{
          id:"3",
          image:"http://datong.crmeb.net/public/uploads/attach/2019/01/15/5c3dc0ef27068.jpg",
          price:"249.00",
          store_name:"智米加湿器 白色"
        },{
          id:"2",
          image:"http://datong.crmeb.net/public/uploads/attach/2019/01/15/5c3dbc27c69c7.jpg",
          price:"0.01",
          store_name:"智能马桶盖 AI版"
        }
      ],
      page: 1,
      limit: 20,
      loadTitle: "",
      loading: false,
      loadend: false
    };
  },
  mounted: function() {
    this.hostProducts();
    this.$scroll(this.$refs.container.parentElement, () => {
      !this.loading && this.hostProducts();
    });
  },
  methods: {
    hostProducts: function() {
      let that = this;
      if (that.loading) return; //阻止下次请求（false可以进行请求）；
      if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
      that.loading = true;
      getHostProducts(that.page, that.limit).then(res => {
        that.loading = false;
        //apply();js将一个数组插入另一个数组;
        that.hostProduct.push.apply(that.hostProduct, res.data);
        that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
        that.page = that.page + 1;
      });
    }
  }
};
</script>
